<template>
  <div class="order">
    <van-tabs v-model="active" type="card" @change="changeTab">
      <van-tab v-for="(item,index) in tagList" :key="index" :title="item.title">
        <div class="card" v-for="(item,index) in orderList" :key="index">
          <van-sticky :offset-top="46">
            <div class="top" style="display:flex;justify-content:space-between;background:#fff;">
            <div class="time">下单时间:{{item.createTime}}</div>
          <div class="nosend" v-if="active==0">
              <van-button type="primary" size="mini" @click.stop="$toast.success('已提醒商家~')">催发货</van-button>
              <van-button type="danger" size="mini" @click.stop="cancelOrder(item.id)">取消订单</van-button>
          </div>
          <div class="recived" v-else-if="active==1">
              <van-button type="primary" size="mini" @click.stop="sureRecived(item.id)">确认收货</van-button>
              <van-button type="danger" size="mini" @click.stop="$toast.success('已提醒商家~')">退货退款</van-button>
          </div>
          <div class="recived" v-else-if="active==2">
              <van-button type="primary" size="mini" @click.stop="replay(item,false)">去评价</van-button>
              <van-button type="danger" size="mini" @click.stop="$toast.success('功能暂未开放~')">售后服务</van-button>
          </div>
          <div class="recived" v-else-if="active==3">
              <van-button type="primary" size="mini" @click.stop="replay(item,true)">追加评价</van-button>
          </div>
          </div>
          </van-sticky>
         
          
          <div class="list" v-if="item.goodsIdList!=null">
            <van-card v-for="(iitem,iindex) in item.goodsList" @click.native="toProductDetail(iitem.id)" :key="iindex"
              :price="iitem.price" :desc="iitem.represent" :title="iitem.goodsName" :thumb="$baseUrl + iitem.pic">
              <template #tags>
                <van-tag plain type="danger">{{iitem.type}}</van-tag>
              </template>
            </van-card>
          </div>
          <div class="one" v-else @click="toProductDetail(item.goods.id)">
            <van-card :price="item.goods.price" :desc="item.goods.represent" :title="item.goods.goodsName"
              :thumb="$baseUrl + item.goods.pic">
              <template #tags>
                <van-tag plain type="danger">{{item.goods.type}}</van-tag>
              </template>
            </van-card>
          </div>
          
        </div>
      </van-tab>
    </van-tabs>
    <none-vue v-if="orderList.length<=0"></none-vue>
  </div>
</template>

<script>
import { getStatusData, getProductById, selectAllGoodsByGoodsId,updateOrderStatus ,subComment} from '@/request/api.js'
import NoneVue from '@/components/common/None.vue'
export default {
  components: { NoneVue },
  data() {
    return ({
      userId: localStorage.getItem('userId'),
      active: 0,
      tagList: [
        { title: '待发货', active: 0 },
        { title: '待收货', active: 1 },
        { title: '待评价', active: 2 },
        { title: '已评价', active: 3 }
      ],
      orderList: [],
    })
  },
  mounted() {
    this.getAll(this.userId, 0)
    setTimeout(() => {
      this.$forceUpdate()
    }, 500)
  },
  methods: {
    replay(item,isAdd){
      let {id,goodsId,goodsIdList,userId} = item
      let commentData = JSON.stringify({id,goodsId,goodsIdList})
      this.$router.push({path:'/comment',query:{commentData,isAdd}})
    },
    sureRecived(id){
      updateOrderStatus(id).then(res=>{
        if(res.data) this.changeTab(2)
      })
    },
    changeTab(val) {
      this.active = val
      this.orderList = []
      this.getAll(this.userId, val)
    },
    getAll(userId, status) {
      getStatusData({ userId, status }).then(res => {
        if (res.data) {
          this.orderList = res.data
          this.orderList.forEach(item => {
            if (item.goodsIdList != null) {
              let { goodsIdList } = item
              goodsIdList = JSON.parse(goodsIdList)
              selectAllGoodsByGoodsId(goodsIdList).then(res => {
                item.goodsList = res.data
              })
            } else {
              getProductById({ id: item.goodsId }).then(res => {
                item.goods = res.data
              })
            }
          })
          setTimeout(() => {
            this.$forceUpdate()
          }, 500)
        }
      })
    },
    toProductDetail(id) {
      this.$router.push({ path: 'productDetail', query: { productId: id } })
    },
    cancelOrder(id) {
      this.$toast.fail('功能暂未开放!')
    }
  }
}
</script>

<style scoped>
  .time{
    margin:3px;
  }
.card {
  margin: 5px;
}

::v-deep .van-card__price {
  color: orangered;
}

.order {
  margin-top: 45px;
  margin-bottom: 20px;
}

::v-deep .van-tabs--card>.van-tabs__wrap {
  height: 45px;

}

::v-deep .van-tabs__nav--card {
  margin: 10px 0;
  border: 1px solid #9370DB;
}

::v-deep .van-tabs__nav--card .van-tab.van-tab--active {
  background: #9370DB;
  color: #fff;
}

::v-deep .van-tabs__nav--card .van-tab {
  color: #9370DB;
  border-right: 1px solid #9370DB;
}
</style>